@import '../../styles/index';

.sidenav {
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-grow: 1;
}

.main {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.main-contents {
  display: flex;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--background);
}

.main-middle {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 48px;
  position: relative;
  height: 100%;
  width: 100%;
  flex-grow: 1;
  min-width: 0;
}

.titlebar--error {
  background: var(--warning) !important;

  /deep/ div,
  /deep/ .titlebar-action {
    color: var(--white) !important;
  }
}

.side-nav-container {
  height: 100%;
  display: flex;
  flex-grow: 1;

  // Scrollable does some weird things to the sidebar here
  :global(.os-content-glue) {
    height: 100% !important;
  }
}

.main-page-container {
  /* Page always takes up remaining space */
  flex-grow: 1;
  display: flex;
  position: relative;
  grid-row: 1 / span 1;
  min-width: 0;
  min-height: 0;
}

.main-loading {
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  background-color: var(--background);
  -webkit-app-region: drag;

  /* Loader component is a fixed element that obscures the top bar */
  /deep/ :global(.s-loader__bg) {
    top: 30px;
  }
}

.initial-loading {
  top: 0 !important;
}

.loader-enter-active,
.loader-leave-active {
  transition: opacity 0.5s ease-out;
}

.loader-enter,
.loader-leave-to {
  opacity: 0;
}

.live-dock {
  height: 100%;
}

.live-dock-container {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  height: 100%;
  position: relative;
  padding: 16px 8px;
  width: 100%;
  min-width: 0;
  border-left: 1px solid var(--border);

  &.left {
    border-right: 1px solid var(--border);
  }
}

.live-dock-collapsed {
    width: 20px;
    height: 100%;
    padding: 0;
    position: relative;
    border-left: 1px solid var(--border);
    box-sizing: border-box;

    &.left {
      border-right: 1px solid var(--border);

      .live-dock-chevron.left {
        left: 50%;
      }
    }

    .live-dock-chevron {
      .center();
    }
}

.live-dock-chevron {
  width: 16px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 2000;

  i {
    .center();

    font-size: 12px;

    &:global(.icon-right) {
      transform: translate(-50%, -50%) rotate(-90deg);
    }
  }

  &.left {
    left: auto;
    right: 0;
  }
}

/deep/ .creator-sites-container .s-loader {
  .s-loader__bg {
    position: unset;
    z-index: unset;
  }
}

.main-middle--compact {
  :global(.performance-metric-icon) {
    height: 12px;
  }

  :global(.performance-metric) {
    font-size: 12px;
  }
}
